<!--
 * @Author: your name
 * @Date: 2021-04-15 10:06:29
 * @LastEditTime: 2021-05-31 15:39:19
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \users-manager\src\pages\main\App.vue
-->
<template>
  <div id="app">
    <el-container>
      <el-header ref="header">
        <main-header />
      </el-header>
      <router-view />
      <el-footer style="height:48px;">Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
import Header from "./views/main/header/Header";

import Container from "./views/main/Container";
export default {
  components: { mainHeader: Header, MainContainer: Container },
  async created() {
    
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.el-header {
  background-color: #0a1926;
  color: #fff;
}

.el-aside {
  background-color: #f2f2f2;
  color: #02080d;
}

.el-main {
  background-color: #fff;
  color: #333;
  padding: 0px !important;
}
.el-footer {
  background-color: #0a1926;
  color: #fff;
  text-align: center;
  line-height: 48px;
}
:focus {
  outline: 0;
}
</style>

<style lang="less">
.scrollbar::-webkit-scrollbar {
  width:5px;
  height:1px;
}
.scrollbar::-webkit-scrollbar-thumb {
  border-radius:5px;
  background-color:#409EFF;
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
}
.scrollbar::-webkit-scrollbar-track {
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #ededed;
  border-radius: 5px;
}
</style>
